<html>
<head>
<style type="text/css">
#map { width: 480px; height: 448px; border: 1px solid #333; background: #eee; position: relative; top: 0; left: 0; overflow: hidden; }
#map .tile { height: 448px; width: 1050px; position: absolute; top: 0; left: 0; z-index: 1; }
.block { width: 32px; height: 32px; position: absolute; top: 0; left: 0; z-index: 23; background: url(img/js-gm-tilew1.png) no-repeat; }
.sky { background-position: -64px -32px; }
.floor { background-position: 0px -32px; }
.brick { background-position: -32px -32px; }
.question { background-position: -64px 0px; }
.bushLeft { background-position: 0px 0px; }
.bushRight { background-position: -32px 0px; }
.bush { background-position: -544px 0px; }
.cloudTopLeft { background-position: -96px 0px; }
.cloudTop { background-position: -128px 0px; }
.cloudTopRight { background-position: -160px 0px; }
.cloudBottomLeft { background-position: -96px -32px; }
.cloudBottom { background-position: -128px -32px; }
.cloudBottomRight { background-position: -160px -32px; }
.mushroomRed { background-position: -256px 0px; }
.mushroomGreen { background-position: -256px -32px; }
.coin { background-position: -288px 0px; }
.pipeTopLeft { background-position: -320px 0px; }
.pipeTopRight { background-position: -352px 0px; }
.pipeLeft { background-position: -320px -32px; }
.pipeRight { background-position: -352px -32px; }
.flagPole { background-position: -384px -32px; }
.flagTopLeft { background-position: -384px 0px; }
.flagTop { background-position: -416px 0px; }
.flagBottom { background-position: -426px -32px; }
.castleBrick { background-position: -448px -32px; }
.castleEntryLeft { background-position: -448px 0px; }
.castleEntryRight { background-position: -480px -32px; }
.castleArch { background-position: -512px -32px; }
.castleTopSky { background-position: -480px 0px; }
.castleTopBrick { background-position: -512px 0px; }
.black { background-position: -288px -32px; }
.grassLeft { background-position: -192px -32px; }
.grassRight { background-position: -224px -32px; }
.grassTop { background-position: -192px 0px; }
.grassSpot { background-position: -224px 0px; }
.grassClear { background-position: -544px -32px; }

p { margin: 10px; }
h1 { display: none; }
h2 { width: 500px; margin: 20px auto; font-weight: normal; font-size: 20px; }
h2 p { float: left; margin: 10px; border: 1px solid #c00; padding: 5px; }
</style>
</head>
<body>

<div id="map"></div>

<p>Move player: &larr; and &rarr; </p>
<p>Jump: &uarr; </p>
<p>Change sprite: &darr; </p>


<p>Copyright &copy; 2010 Rodrigo Silveira. <br/>
 Code in progress... Feel free to use the code and improve it and build on it. <br/>
 Contact me at <a href="mailto:webmaster@rodrigo-silveira.com">webmaster@rodrigo-silveira.com</a> with questions, comments, or feedback</p>

<script type="text/javascript">

window.onload = function() {

var doc = document;
var map = doc.createElement('div');

 function getWorldType(pType) {
   var type = 0;

   switch (tile)
   {
      case -1 : type = 0; break;    // death 0
      case  0 : type = 1; break;    // sky 1
      case  1 : type = 2; break;    // floor 2
      case  2 : type = 2; break;    // brick 2
      case  3 : type = 3; break;    // question 3
      case  4 : type = 1; break;    // bushLeft 1
      case  5 : type = 1; break;    // bushRight 1
      case  6 : type = 1; break;    // bush 1
      case  7 : type = 1; break;    // cloudTopLeft 1
      case  8 : type = 1; break;    // cloudTop 1
      case  9 : type = 1; break;    // cloudTopRight 1
      case 10 : type = 1; break;    // cloudBottomLeft 1
      case 11 : type = 1; break;    // cloudBottom 1
      case 12 : type = 1; break;    // cloudBottomRight 1
      case 13 : type = 5; break;    // mushroomRed 5
      case 14 : type = 4; break;    // mushroomGreen 4
      case 15 : type = 6; break;    // coin 6
      case 16 : type = 7; break;    // pipeTopLeft 7
      case 17 : type = 7; break;    // pipeTopRight 7
      case 18 : type = 2; break;    // pipeLeft 2
      case 19 : type = 2; break;    // pipeRight 2
      case 20 : type = 8; break;    // flagPole 8
      case 21 : type = 8; break;    // flagTopLeft 8
      case 22 : type = 8; break;    // flagTop 8
      case 23 : type = 8; break;    // flagBottom 8
      case 24 : type = 1; break;    // castleBrick 1
      case 25 : type = 1; break;    // castleEntryLeft 1
      case 26 : type = 1; break;    // castleEntryRight 1
      case 27 : type = 1; break;    // castleArch 1
      case 28 : type = 1; break;    // castleTopSky 1
      case 29 : type = 1; break;    // castleTopBrick 1
      case 30 : type = 1; break;    // grassLeft 1
      case 31 : type = 1; break;    // grassRight 1
      case 32 : type = 1; break;    // grassSpot 1
      case 33 : type = 1; break;    // grassClear 1
      case 34 : type = 1; break;    // grassTop 1
      case 35 : type = 1; break;    // black 1
      case 36 : type = 2; break;    // pipeTopNull 9
      case 37 : type = 2; break;    // pipeTopNull 9
   }

   return type;
 }

var Tile = function(pImg, pType) {
    this.img = pImg;
    this.typeEnum = new Array("death", "air", "solid", "question", "coin", "mushroomRed", "mushroomGreen", "pipe", "flag");
    this.getType = function() { return this.typeEnum[this.type]; };
    this.type = pType;
    this.max = function() { return this.typeEnum.length; };
}

var Map = new Object();
var Map = new Object();
    Map.tiles = [
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 9, 0, 0, 0, 0, 0, 0, 0,10,12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0,10,12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 0, 0, 0],
   [ 0, 0,34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [ 0,30,32,31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,16,17],
   [30,32,33,32,31, 0, 0, 0, 0, 0, 0, 4, 6, 5,30,32,31, 0, 0, 0, 0, 0, 0, 4, 5, 0, 0, 0,18,19],
   [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
   [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];

    Map.SCROLL = 5;
    Map.width = Map.tiles[0].length;
    Map.height = Map.tiles.length;

    Map.scroll = function(X, Y) {
           var posX = parseInt(doc.getElementById('mapShell').style.left);
           var posY = parseInt(doc.getElementById('mapShell').style.top);

               doc.getElementById('mapShell').style.left = X + posX;
               doc.getElementById('mapShell').style.top = Y + posY;
    };


    Map.init = function() {
        doc.getElementById('mapShell').style.left = '0px';
        doc.getElementById('mapShell').style.top = '0px';
    }


 function getTile(tile)
 {
   var mClass = 'block';

   switch (tile)
   {
      case -1 : mClass = 'block sky'; break;    // death 0
      case  0 : mClass = 'block sky'; break;    // sky 1
      case  1 : mClass = 'block floor'; break;    // floor 2
      case  2 : mClass = 'block brick'; break;    // brick 2
      case  3 : mClass = 'block question'; break;    // question 3
      case  4 : mClass = 'block bushLeft'; break;    // bushLeft 1
      case  5 : mClass = 'block bushRight'; break;    // bushRight 1
      case  6 : mClass = 'block bush'; break;    // bush 1
      case  7 : mClass = 'block cloudTopLeft'; break;    // cloudTopLeft 1
      case  8 : mClass = 'block cloudTop'; break;    // cloudTop 1
      case  9 : mClass = 'block cloudTopRight'; break;    // cloudTopRight 1
      case 10 : mClass = 'block cloudBottomLeft'; break;    // cloudBottomLeft 1
      case 11 : mClass = 'block cloudBottom'; break;    // cloudBottom 1
      case 12 : mClass = 'block cloudBottomRight'; break;    // cloudBottomRight 1
      case 13 : mClass = 'block mushroomRed'; break;    // mushroomRed 5
      case 14 : mClass = 'block mushroomGreen'; break;    // mushroomGreen 4
      case 15 : mClass = 'block coin'; break;    // coin 6
      case 16 : mClass = 'block pipeTopLeft'; break;    // pipeTopLeft 7
      case 17 : mClass = 'block pipeTopRight'; break;    // pipeTopRight 7
      case 18 : mClass = 'block pipeLeft'; break;    // pipeLeft 2
      case 19 : mClass = 'block pipeRight'; break;    // pipeRight 2
      case 20 : mClass = 'block flagPole'; break;    // flagPole 8
      case 21 : mClass = 'block flagTopLeft'; break;    // flagTopLeft 8
      case 22 : mClass = 'block flagTop'; break;    // flagTop 8
      case 23 : mClass = 'block flagBottom'; break;    // flagBottom 8
      case 24 : mClass = 'block castleBrick'; break;    // castleBrick 1
      case 25 : mClass = 'block castleEntryLeft'; break;    // castleEntryLeft 1
      case 26 : mClass = 'block castleEntryRight'; break;    // castleEntryRight 1
      case 27 : mClass = 'block castleArch'; break;    // castleArch 1
      case 28 : mClass = 'block castleTopSky'; break;    // castleTopSky 1
      case 29 : mClass = 'block castleTopBrick'; break;    // castleTopBrick 1
      case 30 : mClass = 'block grassLeft'; break;    // grassLeft 1
      case 31 : mClass = 'block grassRight'; break;    // grassRight 1
      case 32 : mClass = 'block grassSpot'; break;    // grassSpot 1
      case 33 : mClass = 'block grassClear'; break;    // grassClear 1
      case 34 : mClass = 'block grassTop'; break;    // grassTop 1
      case 35 : mClass = 'block black'; break;    // black 1
      case 36 : mClass = 'block pipeTopLeft'; break;    // pipeTopNull 9
      case 37 : mClass = 'block pipeTopRight'; break;    // pipeTopNull 9


      case 33 : mClass = 'block grassTop'; break;
      case 34 : mClass = 'block black'; break;
   }

   return mClass;
 }

 for (y = 0; y < Map.height; y++)
 {
   for (x = 0; x < Map.width; x++)
   {
      var tile = doc.createElement('div');

      tile.className = getTile(Map.tiles[y][x]);
      tile.style.left = x * 32;
      tile.style.top = y * 32;
      map.appendChild(tile);
   }
 }

 doc.onkeydown = function()
 {
   var key = event.keyCode;

   // LEFT
   if(key == 37) { Map.scroll(Map.SCROLL, 0); }

   // RIGHT
   if(key == 39) { Map.scroll(-Map.SCROLL, 0); }

   // UP
   if(key == 38) { Map.scroll(0, Map.SCROLL); }

   // DOWN
   if(key == 40) { Map.scroll(0, -Map.SCROLL); }
 };

map.className = 'tile';
map.id = 'mapShell';
doc.getElementById('map').appendChild(map);
Map.init();
};

</script>

</body>
</html>